/**
 * 饼图
 */
import React from 'react';
import { findDOMNode } from 'react-dom';
import isEqual from 'lodash/lang/isEqual';
import Highcharts from 'Highcharts';

export const PIE_CHART_CONFIG = {
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false,
		type: 'pie'
	},
	title: {
		text: ''
	},
	tooltip: {
		pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
		formatter() {
			// return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+ Highcharts.numberFormat(this.y, 0, ',') +' 个)';
			return `<p>${this.point.name}</p><br/>占比：${Highcharts.numberFormat(this.percentage, 1)}%<br/><p>数量：${Highcharts.numberFormat(this.y, 0, ',')}</p>`;
		}
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: false
			},
			showInLegend: true
		}
	},
	series: [{
		name: 'Brands',
		data: [/*{
			name: 'Microsoft Internet Explorer',
			y: 56.33
		}, {
			name: 'Chrome',
			y: 24.03,
			sliced: true,
			selected: true
		}, {
			name: 'Firefox',
			y: 10.38
		}, {
			name: 'Safari',
			y: 4.77
		}, {
			name: 'Opera',
			y: 0.91
		}, {
			name: 'Proprietary or Undetectable',
			y: 0.2
		}*/]
	}]
};

export default class PieChart extends React.Component {
	static defaultProps = {
		title: '饼状图',
		subtitle: '正在使用饼状图',
	};

	options = {};

	constructor(props) {
		super(props, PIE_CHART_CONFIG);
	}

	componentWillReceiveProps(nextProps, nextState) {
		let { title, subtitle, yAxisTitle, dataSource, height = 400 } = nextProps;
		this.options = Object.assign({}, PIE_CHART_CONFIG, {
			title: {
				text: title
			},
			series: [{
				name: '占比',
				data: nextProps.dataSource.series
			}]
		});
	}

	componentDidUpdate(prevProps, prevState) {
		let domNode = findDOMNode(this.refs['chartContainer']);

		Highcharts.chart(domNode, this.options);
	}

	shouldComponentUpdate(nextProps, nextState) {
		return !isEqual(nextProps.dataSource, this.props.dataSource);
	}

	render() {
		return (
			<div ref='chartContainer'></div>
		)
	}
}